<template>
  <div class="app-container home">
    <div><h2>千汇物业管理</h2></div>
    <div class="vc-index-1 flex justify-start">
      <div class="index-1-left">
        <div class="index-1-left-1">
          <div class="index-title"><span>小区信息</span></div>
          <div class="flex justify-around border-bottom index-1-left-1-content">
            <!-- <div class="flex justify-start">
              <div class="index-1-left-img"><i class="iconfont icon-louyushu"></i></div>
              <div>
                <div class="index-number">52</div>
                <div class="index-number-describe">楼宇</div>
              </div>
            </div> -->
            <div class="flex justify-start">
              <div class="index-1-left-img"><i class="iconfont icon-shouye"></i></div>
              <div>
                <div class="index-number">{{homeNum}}</div>
                <div class="index-number-describe">房屋</div>
              </div>
            </div>
            <div class="flex justify-start">
              <div class="index-1-left-img"><i class="iconfont icon-shangpuguanliicon"></i></div>
              <div>
                <div class="index-number">{{shopNum}}</div>
                <div class="index-number-describe">商铺</div>
              </div>
            </div>
            <div class="flex justify-start">
              <div class="index-1-left-img"><i class="iconfont icon-chewei"></i></div>
              <div>
                <div class="index-number">{{cwNum}}</div>
                <div class="index-number-describe">已出售车位</div>
              </div>
            </div>
            <div class="flex justify-start">
              <div class="index-1-left-img"><i class="iconfont icon-shibieleixingzihangche"></i></div>
              <div>
                <div class="index-number">{{ckNum}}</div>
                <div class="index-number-describe">已出售车库</div>
              </div>
            </div>
          </div>
          <div class="flex justify-between index-1-left-1-bottom">
            <div class="flex justify-between index-1-left-1-bottom-item" @click="goWYCL">
              <div class="text-center">
                <div class="index-name">物业费临期</div>
                <div class="index-name-ico"><i class="iconfont icon-wuyejiaofei"></i></div>
              </div>
              <div class="text-center">
                <div class="index-number">{{ totalFW }} <span class="index-number-unit">个</span></div>
                <div class="index-number-describe">前往处理&gt;</div>
              </div>
            </div>
            <div class="flex justify-between index-1-left-1-bottom-item" @click="goCWCL">
              <div class="text-center">
                <div class="index-name">车位费临期</div>
                <div class="index-name-ico"><i class="iconfont icon-cheweiguanlifei"></i></div>
              </div>
              <div class="text-center">
                <div class="index-number">{{ totalCW }} <span class="index-number-unit">个</span></div>
                <div class="index-number-describe">前往处理&gt;</div>
              </div>
            </div>
            <div class="flex justify-between index-1-left-1-bottom-item" @click="goCKCL">
              <div class="text-center">
                <div class="index-name">车库费临期</div>
                <div class="index-name-ico"><i class="iconfont icon-shibieleixingzihangche"></i></div>
              </div>
              <div class="text-center">
                <div class="index-number">{{ totalCK }} <span class="index-number-unit">个</span></div>
                <div class="index-number-describe">前往处理&gt;</div>
              </div>
            </div>
          </div>
        </div>
        <vc:create path="property/indexCommunity" id="0385d4b6-9d53-45ca-83a3-1b97999a098e"></vc:create>
      </div>
      <div class="index-1-right">
        <div class="index-1-right-1">
          <div class="index-title"><span>业主反馈</span></div>
          <ul id="pool">
            <li>
              <div class="vc-index-notice-title">丁子骞(东区1号办公楼-0-666)反馈(跟进中<span>-已转报修单</span>)</div>
              <div class="vc-index-notice-time">2024-10-08 09:10:13</div>
            </li>
            <li>
              <div class="vc-index-notice-title">二二(9991-1-002)反馈房屋漏水(跟进中<span>-已转报修单</span>)</div>
              <div class="vc-index-notice-time">2024-09-03 16:46:18</div>
            </li>
            <!--  <li>
              <div class="vc-index-notice-title">演示业主(001-1-201)反馈1111111112222222222222222222(跟进中)</div>
              <div class="vc-index-notice-time">2024-08-27 10:36:30</div>
            </li>
            <li>
              <div class="vc-index-notice-title">qqq(1-0-1)反馈323(跟进中)</div>
              <div class="vc-index-notice-time">2024-08-12 10:09:02</div>
            </li>
            <li>
              <div class="vc-index-notice-title">qqq(1-0-1)反馈23(跟进中)</div>
              <div class="vc-index-notice-time">2024-08-12 10:01:34</div>
            </li> -->
          </ul>
        </div>
        <vc:create path="property/indexNotice" id="d26edd5e-c18e-4498-bdb7-22e3d1163217"></vc:create>
      </div>
    </div>

    <div class="vc-index-1  flex justify-start">
      <div class="middleBox">
        <Stacked :className="CC" />
      </div>
    </div>

    <div class="vc-index-1  flex justify-start">
      <div class="index-1-left">
        <div class="flex justify-between">
          <div class="bg-white index-1-left-item">
            <pie-chart :className="XZ" />
          </div>
          <div class="bg-white index-1-left-item">
            <pie-chart :className="BX" />
          </div>
        </div>
      </div>
      <div class="index-1-right">
        <div class="index-1-right-1" style="height: auto;;">
          <pie-chart :className="CC" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index" lang="ts">
import { getHomeInfo } from '@/api/business/home';
import { failureHouseList, failureGarageList, failureBicycleList } from '@/api/business/failure';
import { HouseCostForm } from '@/api/business/houseCost/types';

import PieChart from './dashboard/PieChart'
import Stacked from './dashboard/Stacked'
const router = useRouter();

const XZ = ref('薪资统计');
const BX = ref('报修统计');
const CC = ref('仓储统计');

const goWYCL = () => {
  router.push({ path: '/costManagement/houseFailure'})
}

const goCWCL = () => {
  router.push({ path: '/costManagement/farageFailure'})
}

const goCKCL = () => {
  router.push({ path: '/costManagement/parkingFailure'})
}
const initFormData: HouseCostForm = {
  houseCostId: undefined,
  projectId: undefined,
  houseId: undefined,
  houseNumber: undefined,
  houseArea: undefined,
  houseManagementCost: undefined,
  houseWasteCose: undefined,
  housePayDate: undefined,
  houseManagementStartDate: undefined,
  houseManagementEndDate: undefined,
  houseCollectionDate: undefined,
  remark: undefined,
}
const queryParamsFW = ref({
  pageNum: 1,
  pageSize: 10,
  houseCostId: undefined,
  projectId: undefined,
  houseId: undefined,
  houseNumber: undefined,
  houseArea: undefined,
  houseManagementCost: undefined,
  houseWasteCose: undefined,
  housePayDate: undefined,
  houseManagementStartDate: undefined,
  houseManagementEndDate: undefined,
  houseCollectionDate: undefined,
  params: {
  }
});
const totalFW = ref(0)

const queryParamsCW = ref({
    pageNum: 1,
    pageSize: 10,
    projectId: undefined,
    garageId: undefined,
    garageNumber: undefined,
    garageArea: undefined,
    garageCategory: undefined,
    garageManagementCost: undefined,
    garageCarNumber: undefined,
    garageManagementStartDate: undefined,
    garageManagementEndDate: undefined,
    garageCollectionDate: undefined,
    params: {
    }
});
const totalCW = ref(0)
const totalCK = ref(0)
const homeNum = ref(0)
const shopNum = ref(0)
const cwNum = ref(0)
const ckNum = ref(0)

onMounted(async() => {
  const FW = await failureHouseList(queryParamsFW.value);
  totalFW.value = FW.total
  const CW = await failureGarageList(queryParamsCW.value);
  totalCW.value = CW.total
  const CK = await failureBicycleList();
  totalCK.value = CK.total
  const homeInfo = await getHomeInfo();
  homeNum.value = homeInfo.houseCount
  shopNum.value = homeInfo.shopCount
  cwNum.value = homeInfo.placeCount
  ckNum.value = homeInfo.garageCount
  sessionStorage.setItem('houseInfo','')
  sessionStorage.setItem('houseCost','')
});
</script>

<style scoped lang="scss">
.home {
  background: #eeeeeea6;
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
}
.index-1-left {
    width: 70%;
    padding: 10px;
    .index-1-left-1 {
        background-color: #FFFFFF;
        border-radius: 10px;
        height: 350px;
        padding: 15px;
        .index-title {
            color: #404357;
            font-size: 20px;
            font-weight: bold;
        }
        .index-1-left-1-content {
            padding-top: 50px;
            padding-bottom: 50px;
            .index-1-left-img {
                background-color: #F6F6F6;
                width: 50px;
                height: 50px;
                border-radius: 5px;
                text-align: center;
                line-height: 60px;
                margin-right: 10px;
                i {
                    color: #00BF6F;
                    font-weight: bold;
                    font-size: 24px;
                }
            }
            .index-number {
                color: #404357;
                font-size: 26px;
                font-weight: bold;
                margin-top: -5px;
            }
            .index-number-describe {
                color: #9D9D9F;
            }
        }
        .index-1-left-1-bottom {
            width: 90%;
            margin: 40px auto;
            .index-1-left-1-bottom-item {
                width: 30%;
                user-select: none;
                cursor: pointer;
            }
            .text-center {
              text-align: center !important;
              .index-name {
                color: #404357;
                font-size: 20px;
                font-weight: bold;
                margin-bottom: 20px;
              }
              .index-name-ico {
                  font-size: 30px;
                  color: #00BF6F;
                  font-weight: bold;
                  margin-top: 5px;
              }
              .index-number {
                  color: #404357;
                  font-size: 26px;
                  font-weight: bold;
                  margin-top: -5px;
              }
              .index-number-describe {
                  color: #9D9D9F;
                  margin-top: 10px;
              }
            }
        }
    }
}
.index-1-right {
    width: 35%;
    padding: 10px;
    .index-1-right-1 {
        background-color: #FFFFFF;
        border-radius: 10px;
        height: 350px;
        padding: 15px;
        .index-title {
            color: #404357;
            font-size: 20px;
            font-weight: bold;
        }
        .vc-index-notice-title {
            font-size: 14px;
            color: #544E42;
            width: 60%;
        }
        .vc-index-notice-time {
            font-size: 14px;
            color: #9D9D9F;
        }
        ul {
          height: 100%;
          li{
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
          }
        }
    }
}
.bg-white {
  width: 49%;
  padding: 15px;
  border-radius: 10px;
}
.middleBox {
  width: 100%;
  padding: 15px;
  margin: 10px;
  border-radius: 10px;
  background: #fff;
  position: relative;
}
</style>
